<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			li{
				list-style: none;
			}
			#vant{
				margin:0 auto;
				width: 1405px;
				position: relative;
			}
			#vant #nav li a{
				height: 425px;
				width: 1400px;
				/* border: 1px solid red; */
				display: inline-block;
			}
			#vant #nav li:nth-of-type(1) a{
				 background: url(../day8/img/1.png) no-repeat;
			}
			#vant #nav li:nth-of-type(2) a{
				 background: url(../day8/img/2.jpg) no-repeat;
				 display: none;
			}
			#vant #nav li:nth-of-type(3) a{
				 background: url(../day8/img/3.jpg) no-repeat;
				 display: none;
			}
			#vant #nav li:nth-of-type(4) a{
				 background: url(../day8/img/4.png) no-repeat;
				 display: none;
			}
			#vant #tip{
				position: absolute;
				background-color: #9A9684;
				height: 25px;
				line-height: 25px;
				border-radius: 15px;
				width: 160px;
				bottom: 10px;
				right: 40%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}
			#vant #tip li{
				background-color: white;
				height: 15px;
				width: 15px;
				line-height: 15px;
				border-radius: 50%;
				text-align: center;
				margin-left: 5px;
				
			}
			#vant #tip li:hover{
				cursor: pointer;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				var timer;
				var index=0;
				function shiftImg(){
					$("#nav li:eq("+index+") a").css("display","none");
					$("#tip li").eq(index).css("background-color","white");
					index=(++index)%4;
					
					$("#tip li").eq(index).css("background-color","#40BBCD");
					
					$("#nav li:eq("+index+") a").css("display","block");
				}
				window.setInterval(shiftImg,1000);
			}); 
		</script>
	</head>
	<body>
		<!--4个元素，disply属性控制是否显示-->
		<!-- 一个图片元素，更换src属性，实现切换-->
		<div id="vant"> 
			<ul id="nav">
				<li><a href="http://www.bdqn.cn"></a></li>
				<li><a href="http://www.bdqn.cn"></a></li>
				<li><a href="http://www.bdqn.cn"></a></li>
				<li><a href="http://www.bdqn.cn"></a></li>
			</ul>
			<ul id="tip">
				<li index="0" style="background-color:#40BBCD;"></li>
				<li index="1"></li>
				<li index="2"></li>
				<li index="3"></li>
				<!--
				data-xxx
				<li index="3" onmouseover="" onmouseout="ss"></li>
				-->
				 
			</ul>
		</div>
	</body>
</html>
